<template>
    <view class="empty" :style="{ height: height + 'vh' }">
        <image class="image" mode="widthFix" v-if="emptyType === 'goods'" src="@/static/images/common/empty_goods.png"></image>
        <image class="image" mode="widthFix" v-if="emptyType === 'address'" src="@/static/images/common/empty_adress.png"></image>
        <image class="image" mode="widthFix" v-if="emptyType === 'order'" src="@/static/images/common/empty_order.png"></image>
        <image class="image" mode="widthFix" v-if="emptyType === 'cash'" src="@/static/images/common/empty_cash.png"></image>
        <text class="text">{{ emptyText }}</text>
    </view>
</template>

<script>
    export default {
        name: "Empty",
		props: {
			emptyType: {
				type: String,
				default: () => {
					return 'goods';
				}
			},
			emptyText: {
				type: String,
				default: () => {
					return '暂无相关商品~';
				}
			},
			height: {
				type: Number,
				default: () => {
					return 90;
				},
			}
		}
    }
</script>

<style lang="scss" scoped>
.empty {
    width: 100%;
    @include flexBox(center, center, column);
    .image {
		width: 272rpx;
    }
    .text {
        color: #333333;
        font-size: 32rpx;
        margin: 40rpx 0;
    }
}
</style>